---
id: performanceIndex
title: 性能指标
---

import { Image } from "antd";

import aaa from "../img/rendering.png";
import waterfall0 from "../img/瀑布流1.png";
import waterfall from "../img/瀑布图.png";
import line from "../img/线.png";

## 加载和响应（两个重要角度）

### 加载

- 理解加载瀑布图（从瀑布图看页面资源从请求到响应的过程）

  <Image width={200} src={waterfall0} />
  <Image width={200} src={waterfall} />

  ** 瀑布流中两条线的颜色 **

  <Image width={200} src={line} />

<p>

  蓝色：DOM 加载完毕 <br />
  红色：页面加载完毕

  </p>

  ** 瀑布的颜色 **(色盲的朋友就比较麻烦了)

<ul>
    <li
    style={{
      background: "#fff",
      border: "1px solid #ccc",
      width: "10px",
      height: "10px",
      display: "inline-block",
    }}
  ></li> 排队时长 <br />
    <li
    style={{
      background: "#858585",
      width: "10px",
      height: "10px",
      display: "inline-block",
    }}
  ></li> 停止连接时长 <br />

<li
  style={{
    background: "#009688",
    width: "10px",
    height: "10px",
    display: "inline-block",
  }}
></li> DNS 查找时长
<br />

<li
  style={{
    background: "#D68100",
    width: "10px",
    height: "10px",
    display: "inline-block",
  }}
></li> 初始连接时长 <br />

<li
  style={{
    background: "#B52DCD",
    width: "10px",
    height: "10px",
    display: "inline-block",
  }}
></li> SSL 连接时长
<br />

<li
  style={{
    background: "#00A846",
    width: "10px",
    height: "10px",
    display: "inline-block",
  }}
></li> TTFB 时长（是发出请求到接收到应答数据第一个字节所花费的毫秒数）
<br />

<li
  style={{
    background: "#0299DE",
    width: "10px",
    height: "10px",
    display: "inline-block",
  }}
></li> 内容下载所需时长
<br />

</ul>

:::tip
** 重要测量指标 **  
 1.首次渲染：在截图里可看到，首次渲染时间越短越好，否则在渲染期间用户看到的是白屏。  
 2.页面加载完成时间：10s 内网页打不开，会有 40%的用户离开；手机用户等待的时间为 6-10 秒。仅供参考  
 3.TTFB：越快越好  
 4.……
:::

<!--
- 基于 HAR 存储与重建性能信息
- 速度指数(Speed Index) -->

### 响应

- 交互动作的反馈时间（越快越好）
- 帧率 FPS（帧率低，有卡顿的感觉）
- 异步请求的完成时间（越快越好）

:::info
FPS:指画面每秒传输帧数，也可以理解为我们常说的“刷新率（单位为 Hz）。75Hz（即 75 帧/秒）以上。<br />要保证网页动画流畅，则需要>=60Hz<br />
google 开发控制台命令 `show frames per second(FPS) meter` 可以显示页面的 FPS
:::

## RAIL 测量模型

我们上面写了好多越快越好，到底多快才能算是好呢。 可以从 RAIL 测量模型中找到答案。  
它是 google 提出的用于衡量页面性能的评分标准。  
目标是让良好的用户体验成为性能优化的目标

### Response 响应

处理事件应在 50ms 以内完成

### Animation 动画

每 10ms 产生一帧

### Idle 空闲

尽可能增加空闲时间，
让浏览器有足够的空闲时间。能让用户的操作得到及时反馈，否则用户就会觉得卡，这时就要考虑一下加大 Idle 的时间，不能让主线程总是处于繁忙的状态。  
可以通过 performance 这个选项卡，查看一些性能指标及主线程情况。

### Load 加载

在 5s 内完成内容加载并可以交互

## 更多内容可以参考

- https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#waterfall
- https://blog.51cto.com/u_13961087/4839656
- https://web.dev/fcp/#how-to-improve-fcp